<template>
    <transition name="slidedown">

        <div class="prev-container" v-show="isShow">
            <div class="mask"></div>
            <div class="indicator">
                <i @click="operate('zoomIn')" class="iconfont icon-jiahao1"></i>
                <i @click="operate('zoomOut')" class="iconfont icon-jian"></i>
                <i @click="operate('rotate')" class="iconfont icon-reset"></i>
                <i @click="close" class="iconfont icon-close"></i>
            </div>
            <div :class="['prev-next', 'left', { 'pointer-allowd': isPrev }]" @click="operate('left')">
                <i class="iconfont icon-houtuishangyige"></i>
            </div>
            <div :class="['prev-next', 'right', { 'pointer-allowd': isNext }]" @click="operate('right')">
                <i class="iconfont icon-qianjinxiayige"></i>
            </div>
            <div ref="imgWrapperRef" class="img-wrapper">
                <img :src="imgPaths[imgIdx]" :style="imgStyle" alt="">
            </div>
        </div>
    </transition>
</template>

<script>

import {enableScroll,disableScroll} from '@/utils/scrollCtrl.js'

export default {
    name: 'PrevImg',
    components: {
    },
    data() {
        return {
            isShow: false,
            imgIdx: 0,
            imgPaths: [],
            transform: {
                rotate: 0,
                scale: 1
            },
            enterAniClass: '',
            winY: null,
        }
    },
    computed: {
        imgStyle() {
            let { rotate, scale } = this.transform
            return {
                transform: `scale(${scale}) rotate(${rotate}deg)`
            }
        },
        isNext() {
            return this.imgIdx != this.imgPaths.length - 1
        },
        isPrev() {
            return this.imgIdx != 0
        },
    },
    mounted() {
        this.$refs['imgWrapperRef'].onclick = e => {
            // console.log(e.target, 2323);
            if (e.target == this.$refs['imgWrapperRef']) {
                this.close()
            }
        }

        // console.log(enableScroll,disableScroll,'11');
        
    },
    methods: {
        open({ imgIdx, imgPaths }) {
            this.isShow = true
            this.imgIdx = imgIdx
            this.imgPaths = imgPaths

            disableScroll()
        },
        
        close() {
            console.log('object');
            this.isShow = false
            this.transform = {
                rotate: 0,
                scale: 1
            }

            enableScroll()
        },
        operate(command) {
            if (command == 'zoomIn') {
                this.transform.scale += 0.04
            } else if (command == 'zoomOut') {
                this.transform.scale -= 0.04
            } else if (command == 'rotate') {
                this.transform.rotate += 90
            } else {
                this.transform = {
                    rotate: 0,
                    scale: 1
                }
                if (command == 'left') {
                    if (this.imgIdx == 0) {
                        return
                    }
                    this.imgIdx = this.imgIdx - 1
                } else if (command == 'right') {
                    if (this.imgIdx == this.imgPaths.length - 1) {
                        return
                    }
                    this.imgIdx = this.imgIdx + 1
                }

            }
        }
    }
}
</script>

<style lang="scss">
.slidedown-enter-active,
.slidedown-leave-active {
    transition: all 0.5s;
}

.slidedown-enter,
.slidedown-leave-to {
    opacity: 0;
    transform: translateY(-20px);
}

.slidedown-enter-to,
.slidedown-leave {
    opacity: 1;
    transform: translateY(0)
}

.prev-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999;

    .mask {
        position: absolute;
        background-color: rgba(0, 0, 0, .3);
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .pointer-allowd {
        cursor: pointer !important;
    }

    .prev-next {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .3);
        text-align: center;
        line-height: 36px;
        cursor: not-allowed;

        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;

        z-index: 2000;
    }

    .left {
        left: 30px;
    }

    .right {
        right: 30px;
    }

    .indicator {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
        z-index: 100;

        i {
            padding: 10px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
    }

    .img-wrapper {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        display: flex;
        align-items: center;
        justify-content: center;

        img {
            max-height: 100%;
            max-width: 80%;
            transition: all 0.5s;
        }
    }
}</style>
